<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>不同年龄区间用户转化率实时折线图</title>
    <!-- 引入 echarts.js -->
<!-- 用本地数据好些   -->
    <script src="echarts.js"></script>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 Dom -->
<div id="main" style="width: 100%;height:500px;margin: 20px auto;"></div>
<script>
    // 初始化 echarts 实例
    var myChart = echarts.init(document.getElementById('main'));
    // 存储所有市场级别（从JSON数据中动态提取，避免硬编码）
    var marketLevels = [];
    // 定义线条颜色（支持多市场级别扩展）
    var lineColors = [
        '#1890ff', '#52c41a', '#faad14', '#f5222d',
        '#722ed1', '#00b42a', '#fa8c16', '#13c2c2'
    ];

    // 定义获取数据并渲染图表的函数
    function renderChart() {
        // 通过 AJAX 读取新用户市场级别支付确认页比例数据
        $.getJSON('../output/mengTime4.json', function (data) {
            if (data.length === 0) return; // 无数据时不执行后续逻辑

            // 1. 提取x轴时间数据（所有15秒间隔的时间点）
            var xAxisData = data.map(item => item.xtime);

            // 2. 动态提取所有市场级别（去重，适配JSON中不同时间点的市场数据）
            if (marketLevels.length === 0) {
                data.forEach(item => {
                    marketLevels = marketLevels.concat(Object.keys(item.yval));
                });
                marketLevels = Array.from(new Set(marketLevels)); // 去重，避免重复市场
            }

            // 3. 处理每个市场级别的比例数据
            var seriesData = marketLevels.map((market, index) => {
                var values = data.map(item => {
                    // 若当前时间点无该市场数据，用0.00%填充（保持折线连续）
                    var ratio = item.yval[market] || "0.00%";
                    // 去除百分号并转换为数字，用于图表渲染
                    return parseFloat(ratio);
                });
                return {
                    name: `市场${market}`, // 显示为"市场1"、"市场2"等，贴合数据格式
                    type: 'line',
                    data: values,
                    smooth: true, // 平滑折线
                    symbol: 'circle', // 数据点样式
                    symbolSize: 6, // 数据点大小
                    showSymbol: false, // 鼠标悬浮时才显示数据点
                    itemStyle: {
                        normal: {
                            color: lineColors[index % lineColors.length], // 循环使用颜色
                            borderColor: '#fff',
                            borderWidth: 2
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 3,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0,0,0,0.3)',
                            shadowOffsetY: 5
                        }
                    },
                    areaStyle: {
                        normal: {
                            // 渐变填充，提升视觉效果
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: `${lineColors[index % lineColors.length]}80`},
                                {offset: 1, color: `${lineColors[index % lineColors.length]}00`}
                            ])
                        }
                    }
                };
            });

            // 4. 计算Y轴最大值（取所有数据的120%，确保数据显示完整）
            var allValues = [];
            seriesData.forEach(series => {
                allValues = allValues.concat(series.data);
            });
            var maxVal = Math.max(...allValues);
            var yAxisMax = Math.ceil(maxVal * 1.2) || 100; // 无数据时默认最大值100

            // 5. 图表配置项
            var option = {
                backgroundColor: '#f5f7fa',
                title: {
                    text: '新用户不同市场级别浏览支付确认页实时比例',
                    left: 'center',
                    textStyle: {
                        color: '#333',
                        fontSize: 18,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255,255,255,0.9)',
                    borderColor: '#ddd',
                    borderWidth: 1,
                    textStyle: { color: '#333' },
                    formatter: function(params) {
                        let html = `<div style="font-weight:bold">${params[0].name}</div>`;
                        params.forEach(item => {
                            html += `<div>${item.seriesName}: ${item.value}%</div>`;
                        });
                        return html;
                    }
                },
                legend: {
                    data: marketLevels.map(market => `市场${market}`),
                    top: '5%',
                    right: '5%',
                    type: 'scroll', // 市场级别过多时开启滚动，避免遮挡
                    pageButtonItemGap: 5,
                    textStyle: { color: '#666' }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    boundaryGap: false, // 折线从x轴起点开始，无间隙
                    axisLine: { lineStyle: { color: '#999' } },
                    axisLabel: {
                        rotate: 45, // 时间标签旋转，避免重叠
                        interval: 0, // 强制显示所有时间点（确保3个15秒坐标点完整显示）
                        color: '#666'
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '浏览比例(%)',
                    min: 0,
                    max: yAxisMax,
                    axisLine: { lineStyle: { color: '#999' } },
                    axisLabel: {
                        color: '#666',
                        formatter: '{value}%' // 显示百分号，明确指标含义
                    },
                    splitLine: { lineStyle: { color: ['#eee'] } }
                },
                series: seriesData
            };

            // 更新图表
            myChart.setOption(option);
        }).fail(function() {
            console.error('数据加载失败，请检查文件路径是否正确（如：newUserMarketPaymentConfirmRatio.json）');
        });
    }

    // 初次渲染图表
    renderChart();

    // 窗口大小变化时自适应调整图表
    window.addEventListener('resize', function() {
        myChart.resize();
    });

    // 开启定时器，每隔15秒更新一次数据（与15秒统计周期对齐）
    setInterval(renderChart, 15000);
</script>
</body>
</html>